<template>
<!--补卡界面-->
<el-dialog :title="$t('giftcard.route.repairCardDialog.title')" :visible.sync="dialogFormVisible" width="300" :close-on-click-modal="false" @close="closeFormDialog">
    <el-form label-position="right" label-width="150px" ref="repairCardForm" :model="repairCardForm" :rules="repairCardFormRules">
        <el-form-item :label="$t('giftcard.route.repairCardDialog.form.oldCardNo')">
            <el-input v-model="repairCardForm.cardNo" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('giftcard.route.repairCardDialog.form.newCardNo')" prop="newCardNo">
            <el-input v-model="repairCardForm.newCardNo"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeFormDialog">{{$t("setting.route.shopSetDialog.dialogCancel")}}</el-button>
        <el-button type="primary" @click="repairGiftCardEvent">{{$t("setting.route.shopSetDialog.dialogOk")}}</el-button>
    </div>
</el-dialog>
</template>

<script>
import {
    repairGiftcard
} from '../../api/api';
export default {
    data() {
        return {
            dialogFormVisible: false,
            repairCardForm: {
                cardId: "",
                cardNo: "",
                newCardNo: ""
            },
            repairCardFormRules: {
                newCardNo: [{
                    required: true,
                    message: this.$t('giftcard.route.repairCardDialog.form.validNewCardNo'),
                    trigger: 'blur'
                }]
            }
        };
    },
    mounted() {},
    methods: {
        //显示界面
        showPage(para) {
            this.repairCardForm.cardId = para.cardId;
            this.repairCardForm.cardNo = para.cardNo;
            this.dialogFormVisible = true;
        },
        repairGiftCardEvent() {
            this.$refs.repairCardForm.validate((valid) => {
                if (valid) {
                    //二次确认
                    this.$confirm(this.$t("giftcard.route.repairCardDialog.reconfirm.content"), this.$t("giftcard.route.repairCardDialog.reconfirm.title"), {
                        type: 'warning'
                    }).then(() => {
                        //提交补卡信息到服务器
                        let para = Object.assign({}, this.repairCardForm);
                        repairGiftcard(para).then(res => {
                            let {
                                msg,
                                code
                            } = res;
                            if (code !== "0") {
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                            } else {
                                this.dialogFormVisible = false;
                                //补卡成功，则重新加载-刷新卡的详细信息
                                this.$parent.loadGiftCardDetail(this.repairCardForm.cardId);
                            }
                        });
                    });
                }
            });
        },
        closeFormDialog() {
            this.dialogFormVisible = false;
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
